<template>
    <div>
        <!-- 匿名插槽 -->
        <slot-no-name>
            <h1>莫欺少年穷</h1>
            <span>默契中年穷</span>
            <p>死者为大</p>
        </slot-no-name>
        <!-- 命名插槽 -->
         <slot-name>
            <template slot="wukong">
                <h1>打败估计</h1>
            </template>
            <template slot="sun">
                <h2>吃桃子</h2>
            </template>
         </slot-name>
         <!-- 作用域插槽 -->
          <slot-scope v-slot="{scope}">
            {{ scope }}
            <p v-for="(item,index) in scope" :key="index">{{ item }}</p>
          </slot-scope>
    </div>
</template>

<script>
import slotNoName from './slotNoName.vue';
import slotName from './slotName.vue';
import slotScope from './slotScope.vue';
    export default {
        components:{
            slotNoName,
            slotName,
            slotScope
        }
    }
</script>

<style lang="scss" scoped>

</style>